import React from 'react'
import LinearGradient from 'react-native-linear-gradient';
import {StyleSheet, Text, TouchableOpacity} from 'react-native'
import {pxToDp} from '../../utils/stylesKits'
export default class Index extends React.Component{
  static defaultProps = {
      style: {},
      textStyle: {}
  }
  render(){
    return (
      // Within your render function
      <TouchableOpacity 
        onPress={this.props.onPress}
        style={{width: '100%', height: '100%', ...this.props.style, overflow: 'hidden'}}>
        <LinearGradient
        start={{x:0, y:0}}
        end={{x:1, y: 0}}
         colors={['#9b63cd', '#e07089', '#192f6a']} style={styles.linearGradient}>
          <Text style={{...styles.buttonText, ...this.props.textStyle}}>
           {this.props.children}
          </Text>
        </LinearGradient>
      </TouchableOpacity>
      
    )
  }
  
}
// Later on in your styles..
var styles = StyleSheet.create({
  linearGradient: {
    flex: 1,
    paddingLeft: pxToDp(15),
    paddingRight: pxToDp(15),
    borderRadius:pxToDp(5),
    width: '100%',
    height: '100%'
  },
  buttonText: {
    fontSize: pxToDp(18),
    fontFamily: 'Gill Sans',
    textAlign: 'center',
    margin: pxToDp(10),
    color: '#ffffff',
    backgroundColor: 'transparent',
  },
});